<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户</title>
    <link rel="stylesheet" href="../css/adAndUp.css">
</head>

<body>
    <div class="container">
        <h2>用户</h2>
        <form action="#" method="post">
            <div class="form-group">
                <label for="name">姓名:</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="gender">性别:</label>
                <select id="gender" name="gender" required>
                    <option value="">请选择</option>
                    <option value="male">男</option>
                    <option value="female">女</option>
                    <option value="other">其它</option>
                </select>
            </div>
            <div class="form-group">
                <label for="age">年龄:</label>
                <input type="number" id="age" name="age" min="0" required>
            </div>
            <div class="form-group">
                <label for="email">邮箱:</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="registrationTime">注册时间:</label>
                <input type="datetime-local" id="registrationTime" name="registrationTime" required>
            </div>
            <button type="submit" onclick="btnSave()">提交</button>
        </form>
    </div>

    <script>
        const seturl = "https://localhost:8000"

        let urlString = window.location.href.split('/');
        let id = urlString[arrString.length - 1] * 1;

        function btnSave() {
            let arr = document.querySelectorAll('.form-group');
            // console.log(arr);
            let [i1, i2, i3, i4, i5] = arr;
            let name = i1.value;
            let gender = i2.value;
            let age = i3.value;
            let email = i4.value;
            let registrationTime = i5.value;

            let userObj = {
                name, age, gender, email, descregistrationTimeription
            }

            console.log(userObj);

            if (!id) {
                // Add
                fetch(`${seturl}/users`, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify(userObj),
                }).then((response) => response.json())
                    .then((userObj) => {
                        console.log("Success:", userObj);
                    })
                    .catch((error) => {
                        console.error("Error:", error);
                    });

            } else {

                //Update
                fetch(`${seturl}/users/${id}`, {
                    method: "PUT",
                    headers: {
                        "Content-Type": "application/json",

                    },
                    body: JSON.stringify(userObj)
                }).then((response) => response.json())
                    .then((userObj) => {
                        console.log("Success:", userObj);
                    })
                    .catch((error) => {
                        console.error("Error:", error);
                    });

                document.addEventListener("DOMContentLoaded", function () {

                    let registratioName = document.querySelector("#name");
                    let registrationAge = document.querySelector("#age");
                    let registrationEmail = document.querySelector("#email");
                    let registrationGender = document.querySelector("#gender");

                    registratioName.value = user


                });
            }

        }

        // RegistrationTimeInput
        document.addEventListener("DOMContentLoaded", function () {
            let registrationTimeInput = document.querySelector("#registrationTime");
            let now = new Date();
            let formattedDate = now.toISOString().slice(0, 16).replace('T', ' ');
            // console.log(now.toISOString().slice(0, 16));

            registrationTimeInput.value = formattedDate;
        });

    </script>
</body>

</html>